<template>
  <div class="collapse">
    <div class="boxHeader" @click="allOption">
      <i
        class="iconfont iconchevronsupshuangshangjiantou"
        :style="[
          { transform: allStatus ? 'rotate(0deg)' : 'rotate(180deg)' },
          { display: 'inline-block' },
        ]"
      ></i>
      {{ allStatus ? "全部关闭" : "全部开启" }}
    </div>
    <div v-for="(item, index) in props.items" :key="index">
      <div class="header" @click="decreamH(index)">
        <span
          class="iconfont iconchevronupshangjiantou"
          :style="[
            { transform: item.status ? 'rotate(0deg)' : 'rotate(180deg)' },
            { display: 'inline-block' },
          ]"
        ></span>
        {{ item.title }}
      </div>
      <transition name="collapse">
        <div class="footer" :style="{ height: item.status ? '400px' : 0 }">
          <slot :name="item.id" :data="item"></slot>
        </div>
      </transition>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, computed, defineEmits } from "vue";
import { Collapse } from "@/type/Collapse";
type prop = {
  items?: Array<Collapse>;
};
const props = defineProps({
  items: {
    type: Array as () => Array<Collapse>,
    default: () => [],
  },
});
const emit = defineEmits(["changeHeight", "allOption"]);
const allStatus = computed(() => props.items?.every((item) => item.status));
const decreamH = (index: number) => {
  emit("changeHeight", index);
};
const allOption = () => {
  emit("allOption", allStatus.value);
};
</script>

<style lang="scss" scoped>
@import url("../css/comment/animate.css");
.collapse {
  box-sizing: border-box;
  .boxHeader {
    height: 40px;
    line-height: 40px;
    padding-left: 10px;
    font-size: 14px;
    background-color: chocolate;
    i {
      transition: transform 0.4s;
    }
    &:hover {
      background-color: rgba(0, 0, 0, 0.1);
      color: #fff;
      // cursor: url("../assets/img/cur/mais.png"), default;
    }
  }
  .header {
    color: #555;
    font-size: 14px;
    padding-left: 30px;
    height: 30px;
    line-height: 30px;
    background-color: rgba(255, 255, 255, 0.2);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    transition: transform 0.1s;
    span {
      transition: transform 0.4s;
    }
    &:hover {
      background-color: rgba(0, 0, 0, 0.1);
      color: #fff;
      // cursor: url("../assets/img/cur/mais.png"), default;
    }
  }
  .footer {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.2);
    transition: all 0.4s;
    overflow-y: auto;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
  }
}
</style>
